<template>
  <div class="header-swiper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in swiperList" :key="item.id">
        <img :src="item.imgUrl" />
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  props:['swiperList'],
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        autoplay: 2000,
        speed: 800
        // Some Swiper option/callback...
      },
    };
  },
};
</script>

<style scoped>
.header-swiper {
  width: 100%;
  background: #ccc;
  height: 0;
  padding-bottom: 25.5%;
}
.header-swiper img {
  width: 100%;
  height: 100%;
}
</style>